<template>
	<view class="homeHead">
		<view class="statusBar" :style="{height: statusBarHeight + 'px'}"></view>
		<view class="titleBar mycolor" :style="{height: titleBarHeight + 'px'}">金账簿</view>
		<view class="content">
			<view class="time mycolor">
				<view class="left">
					<uni-dateformat :date="Date.now()" format="dd"></uni-dateformat>
				</view>
				<view class="right">
					<view class="year">
						<uni-dateformat :date="Date.now()" format="yyyy年MM月"></uni-dateformat>
					</view>
					<view class="week">{{week}}</view>
				</view>
			</view>
			<view class="pic">
				<!-- <view class="element"></view> -->
				<image class="" src="../../static/images/yb.png" mode="heightFix"></image>
			</view>
		</view>
		
	</view>
</template>
<script>
	import {getStatusBarHeight, getTitleBarHeight} from "@/utils/system.js"
	import {getCurrentDayofWeek} from "@/utils/tools.js"
	export default {
		
		name:"home-head",
		data() {
			return {
				
			};
		},

		computed: {
			statusBarHeight() {
				return getStatusBarHeight()
			},
			titleBarHeight() {
				return getTitleBarHeight()
			},
			week() {
				return getCurrentDayofWeek()
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
.homeHead{
	.titleBar{
		display: flex;
		align-items: center;
		padding-left: 50rpx;
		font-weight: bolder;
		font-size: 60rpx;
	}
	.content{
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 8vh;
		.time{
			padding-left: 50rpx;
			display: flex;
			align-items: center;
			.left{
				font-size: 70rpx;
				font-weight: bolder;
			}
			.right{
				padding-left: 15rpx;
				.year{
					font-size: 25rpx;
				}
				.week{
					font-size: 30rpx;
					font-weight: bolder;
				}
			}
		}
		.pic{
			position: relative;
			height: 100%;
			padding-right: 100rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
}
// 文字浮动
.floating-text {
  // font-size: 36px;
  // color: #4CAF50;
  background: var(--background-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: brightness(70%);
  animation: floatEffect 2.5s ease-in-out infinite;
}

/* 定义浮动动画 */
@keyframes floatEffect {
  0% {
    transform: translateY(0px) scale(1);
  }
  50% {
    transform: translateY(-10px) scale(1.05);
  }
  100% {
    transform: translateY(0px) scale(1);
  }
}
@keyframes colorChange {

	0%,
	100% {
		--color1: #FFD700;
		/* 红色 */
		--color2: #ff8000;
		/* 橙色 */
	}

	10% {
		--color1: #ff8000;
		/* 橙色 */
		--color2: #F08080;
		/* 黄色 */
	}

	20% {
		--color1: #F08080;
		/* 黄色 */
		--color2: #FF0000;
		/* 黄绿色 */
	}

	30% {
		--color1: #FF0000;
		/* 黄绿色 */
		--color2: #FF4500;
		/* 绿色 */
	}

	40% {
		--color1: #FF4500;
		/* 绿色 */
		--color2: #EE4000;
		/* 青绿色 */
	}

	50% {
		--color1: #EE4000;
		/* 青绿色 */
		--color2: #FF1493;
		/* 青色 */
	}

	60% {
		--color1: #FF1493;
		/* 青色 */
		--color2: #FF6EB4;
		/* 蓝色 */
	}

	70% {
		--color1: #FF6EB4;
		/* 蓝色 */
		--color2: #FF7256;
		/* 深蓝色 */
	}

	80% {
		--color1: #FF7256;
		/* 深蓝色 */
		--color2: #FFF68F;
		/* 紫色 */
	}

	90% {
		--color1: #FFF68F;
		/* 紫色 */
		--color2: #FFFF00;
		/* 紫红色 */
	}
}

@property --color1 {
	syntax: "<color>";
	inherits: true;
	initial-value: #FFD700;
}

@property --color2 {
	syntax: "<color>";
	inherits: true;
	initial-value: #FFA500;
}

:root {
	--color1: #FFD700;
	--color2: #FFA500;
	--background-gradient: linear-gradient(-45deg, var(--color1), var(--color2));
	animation: colorChange 20s linear infinite;
}
.mycolor {
		background: var(--background-gradient);
		background-clip: text;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		filter: brightness(70%);
}
// 文字浮动加颜色渐变动画
.mycolor2 {
  // font-size: 40px;
  // font-weight: bold;
  background: var(--background-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: brightness(70%);
  
  /* 同时应用两个动画 */
  animation: 
    colorChange 20s linear infinite,
    floatEffect 3s ease-in-out infinite;
}

// 图片浮动
.floating-image {
  width: 80%; /* 让图片宽度适应容器，留出一些空白作为缓冲区 */
  animation: floatImgEffect 4s ease-in-out infinite;
  border-radius: 10px; /* 可选：为图片添加圆角 */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 4px 6px rgba(0, 0, 0, 0.1); /* 更深更明显的阴影 */
}

@keyframes floatImgEffect {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-10px) scale(1.05); /* 调整translateY和scale值来控制浮动高度和放大比例 */
  }
}


.element {
	width: 100px;
	height: 100px;
	background: var(--background-gradient);
	border-radius: 50%;
	filter: blur(60px);
	position: absolute;
	
}
</style>